<template>
	<view class="openPayment">
		<view class="tips">如果商户类型为企业，则微信结算账户必须为对公账户！</view>
		<u-form :model="form" ref='uForm' :border="false">
			<u-form-item :border-bottom="false">
				<u-input v-model="form.bankBranchId" style="display: none;" />
				<u-input v-model="bankBranchName" border placeholder="开户银行全称(含支行)" @click="chooseBank" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input v-model="form.contactName" border placeholder="请输入管理员姓名" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input v-model="form.contactIdCardNumber" border placeholder="请输入管理员身份证件号码" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input v-model="form.mobilePhone" border placeholder="请输入管理员联系手机" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input v-model="form.contactEmail" border placeholder="请输入管理员联系邮箱" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input v-model="form.contactType" style="display: none;" />
				<u-input v-model="contactTypeValue" type="select" border placeholder="请选择管理员类型"
					@click="contactTypeShow=true" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input v-model="form.accountBank" border placeholder="请输入开户银行" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<view style="width: 100%;position: relative;">
					<u-input v-model="form.accountName" border placeholder="请输入开户名称" />
					<view class="tips tips2">*对公为营业执照企业名称,个人银行卡则为法人名字</view>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input v-model="form.accountNumber" border placeholder="请输入银行帐号" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input v-model="form.bankAddressCode" style="display: none;" />
				<u-input v-model="bankAddressDesc" type="select" border placeholder="请选择开户银行省市编码"
					@click="regionShow=true" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-button class="openBtn" shape="circle" ripple @click="submit()">提交申请</u-button>
			</u-form-item>
		</u-form>
		<!-- 管理员类型 -->
		<u-select v-model="contactTypeShow" :list="contactTypeList" @confirm="contactTypeConfirm"></u-select>
		<!-- 开户银行省市编码 -->
		<u-picker mode="region" v-model="regionShow" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: '#357cd4'
				},
				form: {
					bankBranchId: '', //开户银行全称(含支行)
					contactName: '', //管理员姓名
					contactIdCardNumber: '', //管理员身份证件号码
					mobilePhone: '', //管理员联系手机
					contactEmail: '', //管理员联系邮箱
					contactType: '', //管理员类型
					accountBank: '', //开户银行
					accountName: '', //开户名称
					accountNumber: '', //银行帐号
					bankAddressCode: '' //开户银行省市编码
				},

				bankBranchName: '',

				contactTypeValue: '', //管理员类型值
				contactTypeShow: false,
				contactTypeList: [{
					label: '经营者/法人',
					value: '65'
				}, {
					label: '负责人',
					value: '66'
				}],

				regionShow: false,
				bankAddressDesc: '',
				isUpdate: true
			}
		},
		onBackPress() {
			uni.switchTab({
				url: '/pages/rols/home'
			})
			return true
		},
		onLoad(option) {
			if (option.statusCode == 2) {
				uni.setNavigationBarTitle({
					title: "修改微信线上支付"
				});
				this.getWxOnlineInfo();
				this.isUpdate = false;
			} else {
				uni.setNavigationBarTitle({
					title: "开通微信线上支付"
				});
				this.isUpdate = true;
			}
		},
		methods: {
			getWxOnlineInfo() {
				this.$u.api.getWxOnlineInfo().then(res => {
					this.bankName
					this.form = {
						bankBranchId: res.data.bankBranchId, //开户银行全称(含支行)
						contactName: res.data.contactName, //管理员姓名
						contactIdCardNumber: res.data.contactIdCardNumber, //管理员身份证件号码
						mobilePhone: res.data.mobilePhone, //管理员联系手机
						contactEmail: res.data.contactEmail, //管理员联系邮箱
						contactType: res.data.contactType, //管理员类型
						accountBank: res.data.accountBank, //开户银行
						accountName: res.data.accountName, //开户名称
						accountNumber: res.data.accountNumber, //银行帐号
						bankAddressCode: res.data.bankAddressCode //开户银行省市编码
					}
					this.bankBranchName = res.data.bankName;
					this.contactTypeList.forEach(item => {
						if (item.value == res.data.contactType) {
							this.contactTypeValue = item.label
						}
					})
				})
			},
			chooseBank() {
				uni.navigateTo({
					url: '/pages/line/home/bankList'
				})
			},
			//管理员类型确认回调
			contactTypeConfirm(e) {
				this.form.contactType = e[0].value;
				this.contactTypeValue = e[0].label;
			},
			//开户银行省市编码
			regionConfirm(e) {
				this.form.bankAddressCode = e.area.value;
				this.bankAddressDesc = e.province.label + '/' + e.city.label + '/' + e.area.label;
			},
			submit() {
				let _this = this;
				if (this.isUpdate) {
					this.$u.api.payChannelWxOnlinePost(this.form).then(res => {
						if (res.code == 0) {
							this.$u.api.applyWxOnlinepost().then(result => {
								if (result.code == 0) {
									this.$u.toast('申请成功!');
									setTimeout(function(){
										_this.back()
									},2000)
								} else {
									this.$u.toast('申请失败!' + result.msg);
								}
							})
						} else {
							this.$u.toast(res.msg);
						}
					})
				} else {
					this.$u.api.payChannelWxOnlinePut(this.form).then(res => {
						if (res.code == 0) {
							this.$u.api.applyWxOnlinepost().then(result => {
								if (result.code == 0) {
									this.$u.toast('修改成功!');
									setTimeout(function(){
										_this.back()
									},2000)
								} else {
									this.$u.toast('修改失败!' + result.msg);
								}
							})
						} else {
							this.$u.toast(res.msg);
						}
					})
				}
			},
			back() {
				uni.switchTab({
					url: '/pages/line/home/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.openPayment {
		padding: 30rpx;

		.tips {
			color: #2671E8;
			font-size: 24rpx;
			text-align: center;
		}

		.tips2 {
			line-height: 1;
			position: absolute;
			text-align: left;
			width: 100%;
			margin-top: 8rpx;
			color: #FD0101;
		}

		.openBtn {
			width: 570rpx;
			height: 80rpx;
			background-color: #3583F0;
			font-size: 32rpx;
			color: white;
			box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32)
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.search {
		padding: 30rpx;
		background-color: #357cd4;
	}

	.bankBox {
		overflow: scroll;
		height: calc(100vh - 62px);
	}

	.search-item {
		width: 100%;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #ccc;
	}
</style>
